Al ejecutar los tests vemos errores como el siguiente en la consola del navegador:
NG0304: 'app-list-element' is not a known element
El error se produce porque en el tests no están definidos esos componentes
En realidad no tenemos que definirlos a no ser que los necesitemos para testear algo relacionado con el componente faltante, en ese caso lo declarariamos asi en el test:
Al ejecutar el test ya veríamos la ejecución sin errores:
Otra solución es mockear el componente, para simular un comportamiento concreto que necesitemos para el test:
Al mockear el componente vacio en este caso obtenemos lo siguientes errores por consola:
Como podemos ver el error NG0304 ha desaparecido, pero los errores NG0303 persisten, ya que el componente que hemos declarado no contiene las propiedades que si que contiene el componente original.
Si queremos podemos definirlas:
El codigo del componente definitivo quedaría tal que así:
import { Component, Input } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ListBlockComponent } from 'src/app/shared-components/list-block/list-block.component';
describe('ListBlockComponent', () => {
let component: ListBlockComponent;
let fixture: ComponentFixture<ListBlockComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ListBlockComponent, MockListComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ListBlockComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
@Component({
selector: 'app-list-element',
template: ''
})
class MockListComponent {
@Input() map: any;
@Input() sliceLimit: any;
@Input() elementName: any;
}
Otra solución que podemos adoptar es la de configurar los tests para que los errores sean obviados:
schemas: [NO_ERRORS_SCHEMA]
Angular | NG0304 | expect | Error